/* Tablet */
@media (max-width: 992px) {
  .header {
    padding: 10px 20px;
  }

  .header > .header-inner {
    gap: 20px;
  }

  .header > .header-inner > .header-nav > ul {
    gap: 20px;
    font-size: 15px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .header {
    padding: 10px 16px;
  }

  .header > .header-inner {
    align-items: center;
  }

  /* Show hamburger button */
  .header > .header-inner > .menu-toggle {
    display: block;
  }

  /* Put logo left, toggle right */
  .header > .header-inner {
    justify-content: space-between;
  }

  /* Nav becomes dropdown */
  .header > .header-inner > .header-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    background-color: #e9e3dd;
    border-bottom: 1px solid #e8ded5;
    padding: 12px 16px 16px;
    display: none;
    z-index: 99;
  }

  .header > .header-inner > .header-nav > ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-left: 0px;
    padding: 0px;
  }

  .header > .header-inner > .header-nav > ul > li > a {
    white-space: normal;
  }

  /* CTA under nav in dropdown */
  .header > .header-inner > .header-cta {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(64px + 100%);
    display: none;
    padding: 0 16px 16px;
  }

  .header > .header-inner > .header-cta > .btn-join {
    width: 100%;
    justify-content: center;
  }

  /* When header has is-open class, show nav + cta */
  .header.is-open > .header-inner > .header-nav {
    display: block;
  }

  .header.is-open > .header-inner > .header-cta {
    display: flex;
  }
}




/* Tablet */
@media (max-width: 992px) {
  .index_sec_2 {
    padding: 60px 24px 80px;
  }

  .index_sec_2 > .index_sec_2_inner > .index_sec_2_head > h2 {
    font-size: 34px;
  }

  .index_sec_2 > .index_sec_2_inner > .index_sec_2_cards {
    gap: 20px;
  }

  .index_sec_2
    > .index_sec_2_inner
    > .index_sec_2_cards
    > .index_sec_2_card {
    padding: 42px 28px 34px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .index_sec_2 {
    padding: 50px 16px 70px;
  }

  .index_sec_2 > .index_sec_2_inner > .index_sec_2_cards {
    flex-direction: column;
  }

  .index_sec_2
    > .index_sec_2_inner
    > .index_sec_2_cards
    > .index_sec_2_card {
    padding: 44px 24px 32px;
  }

  .index_sec_2
    > .index_sec_2_inner
    > .index_sec_2_cards
    > .index_sec_2_card
    > .step-badge {
    left: 24px;
    width: 52px;
    height: 52px;
    font-size: 18px;
  }

  .index_sec_2
    > .index_sec_2_inner
    > .index_sec_2_cards
    > .index_sec_2_card
    > .card-inner
    > .card-icon {
    width: 70px;
    height: 70px;
    border-radius: 20px;
  }
}



/* Tablet */
@media (max-width: 992px) {
  .index_sec_4 {
    padding: 70px 24px 90px;
  }

  .index_sec_4 > .index_sec_4_inner > .index_sec_4_head > h2 {
    font-size: 40px;
  }

  .index_sec_4 > .index_sec_4_inner > .index_sec_4_cards {
    gap: 20px;
  }

  .index_sec_4
    > .index_sec_4_inner
    > .index_sec_4_cards
    > .index_sec_4_card {
    padding: 28px 24px 24px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .index_sec_4 {
    padding: 60px 16px 80px;
  }

  .index_sec_4 > .index_sec_4_inner > .index_sec_4_head > h2 {
    font-size: 30px;
  }

  .index_sec_4 > .index_sec_4_inner > .index_sec_4_cards {
    flex-direction: column;
  }

  .index_sec_4
    > .index_sec_4_inner
    > .index_sec_4_cards
    > .index_sec_4_card {
    padding: 26px 20px 22px;
  }

  .index_sec_4
    > .index_sec_4_inner
    > .index_sec_4_cards
    > .index_sec_4_card
    > .card_top
    > .avatar_circle {
    width: 64px;
    height: 64px;
  }

  .index_sec_4
    > .index_sec_4_inner
    > .index_sec_4_cards
    > .index_sec_4_card
    > .card_footer
    > .btn_profile {
    padding: 11px 16px;
  }
}



/* Tablet */
@media (max-width: 992px) {
  .footer {
    padding: 40px 24px 22px;
  }

  .footer > .footer-inner > .footer-top {
    gap: 40px;
  }

  .footer > .footer-inner > .footer-top > .footer-columns {
    gap: 50px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .footer {
    padding: 36px 18px 20px;
  }

  .footer > .footer-inner > .footer-top {
    flex-direction: column;
    gap: 28px;
  }

  .footer > .footer-inner > .footer-top > .footer-brand {
    max-width: none;
  }

  .footer > .footer-inner > .footer-top > .footer-columns {
    flex-wrap: wrap;
    gap: 24px;
  }

  .footer
    > .footer-inner
    > .footer-top
    > .footer-columns
    > .footer-col {
    min-width: 140px;
  }

  .footer > .footer-inner > .footer-bottom > p {
    font-size: 13px;
  }
}








/* =====================================================
   LARGE LAPTOP / SMALL DESKTOP ( <= 1200px )
===================================================== */
@media (max-width: 1200px) {

  /* DISCOVER */
  .discover .container {
    padding: 0 16px;
  }

  /* DETAIL */
  .detail_sec .container {
    padding: 0 16px;
  }
}

/* =====================================================
   TABLET ( <= 1024px )
===================================================== */
@media (max-width: 1024px) {

  /* ================= DISCOVER ================= */
  .discover .cards {
    grid-template-columns: 1fr;
  }

  .discover .filters {
    flex-wrap: wrap;
  }

  .discover .filters input {
    flex: 1 1 100%;
  }

  .discover .filters select {
    flex: 1 1 48%;
  }

  /* ================= DETAIL ================= */
  .detail_sec .grid {
    grid-template-columns: 1fr;
  }

  .detail_sec .profile-header {
    flex-direction: column;
    gap: 16px;
  }

  .detail_sec .unlock-btn {
    align-self: flex-start;
  }

  .detail_sec .portfolio {
    grid-template-columns: 1fr 1fr;
  }
}

/* =====================================================
   MOBILE ( <= 768px )
===================================================== */
@media (max-width: 768px) {

  /* ================= DISCOVER ================= */
  .discover .container {
    margin: 24px auto;
  }

  .discover .results-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .discover .outline-btn {
    width: 100%;
    text-align: center;
  }

  .discover .card {
    padding: 20px;
  }

  .discover .card-header {
    align-items: flex-start;
  }

  .discover .avatar {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

  .discover .actions {
    flex-direction: column;
  }

  .discover .primary-btn,
  .discover .secondary-btn {
    width: 100%;
  }

  /* ================= DETAIL ================= */
  .detail_sec {
    padding: 24px 0;
  }

  .detail_sec .profile-left {
    align-items: flex-start;
  }

  .detail_sec .avatar {
    width: 60px;
    height: 60px;
    font-size: 22px;
  }

  .detail_sec .name h1 {
    font-size: 18px;
    line-height: 1.3;
  }

  .detail_sec .portfolio img {
    height: 160px;
  }

  .detail_sec .featured {
    padding: 14px;
  }
}

/* =====================================================
   SMALL MOBILE ( <= 480px )
===================================================== */
@media (max-width: 480px) {

  /* ================= DISCOVER ================= */
  .discover .filters {
    gap: 12px;
  }

  .discover .filters select {
    flex: 1 1 100%;
  }

  .discover .tags span {
    font-size: 12px;
    padding: 5px 10px;
  }

  /* ================= DETAIL ================= */
  .detail_sec .profile-header {
    gap: 12px;
  }

  .detail_sec .profile-left {
    flex-direction: column;
    gap: 12px;
  }

  .detail_sec .unlock-btn {
    width: 100%;
  }

  .detail_sec .portfolio {
    grid-template-columns: 1fr;
  }

  .detail_sec .portfolio img {
    height: 200px;
  }

  .detail_sec .card {
    padding: 14px;
  }

  .detail_sec .chip {
    font-size: 11px;
    padding: 4px 8px;
  }
}




/* =====================================================
   TABLET & SMALL LAPTOP ( <= 1024px )
===================================================== */
@media (max-width: 1024px) {

  .join_busn .card {
    width: 100%;
    max-width: 420px;
  }
}

/* =====================================================
   MOBILE ( <= 768px )
===================================================== */
@media (max-width: 768px) {

  .join_busn {
    padding: 24px 16px;
  }

  .join_busn .card {
    padding: 28px 22px;
    border-radius: 20px;
  }

  .join_busn h2 {
    font-size: 22px;
  }

  .join_busn .subtitle {
    font-size: 14px;
  }

  .join_busn ul li {
    font-size: 14px;
  }

  .join_busn .btn {
    padding: 14px;
    font-size: 15px;
  }
}

/* =====================================================
   SMALL MOBILE ( <= 480px )
===================================================== */
@media (max-width: 480px) {

  .join_busn .card {
    padding: 24px 18px;
    border-radius: 18px;
  }

  .join_busn .icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }

  .join_busn .icon-wrap svg {
    width: 30px;
    height: 30px;
  }

  .join_busn h2 {
    font-size: 20px;
  }

  .join_busn ul li {
    gap: 10px;
  }
}




/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 768px) {

  .dir_access h1 {
    font-size: 22px;
  }

  .dir_access .features {
    grid-template-columns: 1fr;
  }

  .dir_access .row {
    grid-template-columns: 1fr;
  }

  .dir_access .actions {
    flex-direction: column;
    gap: 10px;
  }

  .dir_access .btn-back,
  .dir_access .btn-next {
    width: 100%;
  }
}



@media (max-width: 1024px) {

  .reel_section {
    padding: 60px 40px;
  }

  .reel_section > .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  .reel_section > .header > h2 {
    font-size: 34px;
  }

  .reel_section > .header > p {
    font-size: 16px;
  }

  .reel_section > .grid > .card {
    height: 240px;
  }
}

/* =========================
   MOBILE (max-width: 768px)
========================= */
@media (max-width: 768px) {

  .reel_section {
    padding: 50px 24px;
  }

  .reel_section > .grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .reel_section > .header {
    margin-bottom: 36px;
  }

  .reel_section > .header > h2 {
    font-size: 30px;
  }

  .reel_section > .header > p {
    font-size: 15px;
  }

  .reel_section > .grid > .card {
    height: 220px;
  }

  .reel_section > .grid > .card > .play {
    width: 48px;
    height: 48px;
    font-size: 16px;
  }

  .reel_section > .grid > .card > .info > h4 {
    font-size: 16px;
  }

  .reel_section > .grid > .card > .info > p {
    font-size: 13px;
  }

  .reel_section > .video_modal > .video_box {
    width: 92%;
  }
}

/* =========================
   SMALL MOBILE (max-width: 480px)
========================= */
@media (max-width: 480px) {

  .reel_section {
    padding: 40px 16px;
  }

  .reel_section > .header > h2 {
    font-size: 26px;
  }

  .reel_section > .header > p {
    font-size: 14px;
  }

  .reel_section > .grid > .card {
    height: 200px;
  }

  .reel_section > .grid > .card > .tag {
    font-size: 11px;
    padding: 4px 8px;
  }
}